<template>
    <div class="con">
        <div class="header">
      <van-icon name="scan" class="ewm" style="background:#fff" />
      <input type="text" value="搜索货号/关键字" />
      <van-icon name="chat-o" class="msg" style="background:#fff" @click="message()"/>
      <van-icon name="search" class="search" />
    </div>
    <nav>
      <ul class="tit">
        <li>
          <router-link to="/p1" tag="div" style="background:#fff">推荐</router-link>
        </li>
        <li>
          <router-link to="/p2" tag="span" style="background:#fff" >TV直播</router-link>
        </li>
        <li>
          <router-link to="/p3" tag="span" style="background:#fff">团购</router-link>
        </li>
        <li>
          <router-link to="/p4" tag="span" style="background:#fff">全球购</router-link>
        </li>
        <li>
          <router-link to="/p5" tag="span" style="background:#fff">奥莱得</router-link>
        </li>
        <li>
          <router-link to="/p6" tag="span">家电</router-link>
        </li>
      </ul>
      <van-icon name="arrow-down" style="background:#fff" class="arrow-down" @click="alert()"/>
      <div class="alert" v-if="show" >
        <h2>全部栏目</h2>
        <ul>
          <li @click="tab1()" >推荐</li>
          <li  @click="tab2()" >TV直播</li>
          <li  @click="tab3()">团购</li>
          <li  @click="tab4()">全球购</li>
          <li  @click="tab5()">奥莱得</li>
          <li>家电</li>
          <li>逛好店</li>
          <li>美食保健</li>
          <li>服饰鞋包</li>
          <li>家居百货</li>
          <li>家装家纺</li>
          <li>美妆珠宝</li>
        </ul>
      </div>
    </nav>
    <main>
      <router-view></router-view>
    </main>
    </div>
</template>

<script>
import Alertcell from '../components/Alertcell'
export default {
    name:'Name',
    data(){
      return {
        show:false,
        isactive:true,
      }
    },
    methods:{
      alert(){
        this.show=!this.show
      },
        cart() {
      this.$router.push("/cart");
    },
    index() {
      this.$router.push("/index");
    },
    live() {
      this.$router.push("/live");
    },
    sort() {
      this.$router.push("/sort");
    },
    mine() {
      this.$router.push("/mine");
    },
    
    
    tab2(){
      this.$router.push("/p2")
      this.show=!this.show
     }
     ,
     tab1(){
      this.$router.push("/p1")
      this.show=!this.show;

     }
     ,
    tab3(){
      this.$router.push("/p3")
       this.show=!this.show
     }
       ,
    tab4(){
      this.$router.push("/p4")
       this.show=!this.show
     },
     message(){
      this.$router.push("/message")

     }
    
    },
    mounted(){
       window.addEventListener('scroll', this.scrollToTop)
    }
}
</script>

<style scoped>
.alert{
  width: 100%;
  height: 150px;
  position: absolute;
  top: 10px;
  left: 0;
  z-index: 2;
  background: #fff
}
.alert h2{
  font-weight: normal;
  padding-left: 10px;
  font-size: 15px
}
.alert ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
  justify-content: space-between;
  margin-top: 10px
}
.alert ul li{
  width: 23%;
  height: 25px;
  border: 1px solid #e4e4e4;
  box-sizing: border-box;
  text-align: center;
  line-height: 25px;
  border-radius: 5px;
  font-size: 14px;
  margin-bottom: 10px;
  color: #414141
}
.van-popup--top{
  top: 70px
}
* {
  margin: 0;
  padding: 0;
}
.con{
  height: 100%;
  position: relative;
}
.header {
  padding: 0 12px;
  justify-content: space-between;
  background: #fff;
  height: 46px;
  display: flex;
  align-items: center;
  position: relative;
}
.header input {
  border-radius: 5px;
  width: 260px;
  height: 30px;
  background: #f1f1f3;
  border: 0;
  font-size: 12px;
  font-weight: 400;
  color: #7f7f7f;
  padding-left: 20px;
}
.ewm,
.msg {
  font-size: 22px;
  vertical-align: middle;
  color: #7f7f7f;
}
.ewm {
  margin-right: -5px;
}
.search {
  position: absolute;
  left: 300px;
  font-size: 20px;
  color: #7f7f7f;
}
nav {
  margin-top: -5px;
  background: #fff;
  height: 35px;
  position: relative;
  padding-left: 14px;
  display: flex;
  align-items: center;
}
.router-link-active {
  color: red;
  border-bottom: 2px solid red;
}
nav .tit {
  background: #fff;
  overflow: auto;
  display: flex;
  flex-wrap: nowrap;
  width: 314px;
}
nav .tit li {
  background: #fff;
  flex: 0 0 auto;
  font-size: 14px;
  color: #000;
  margin-right: 35px;
  font-weight: 600;
  height: 24px;
  line-height: 24px;
}
nav .tit  .router-link {
  height: ;
}
nav .tit li .router-link {
  font-style: normal;
}
.arrow-down {
  font-size: 16px;
  color: #000;
  display: inline-block;
  position: absolute;
  right: 18px;
  top: 10px;
  z-index: 3
}
main {
  flex: 1;
  overflow: auto;
}
.active{
  border: 1px solid red!important
}
</style>